<template>
	<view @touchmove.stop.prevent>
		<view
			class="menuFixed"
			:data-size="menuSize"
			:data-top="top"
			:data-windowwidth="windowWidth"
			:data-windowheight="windowHeight"
			:data-right="right"
			:data-bottom="bottom"
			:data-left="left"
			:data-type="type"
			:data-disabled="disabled"
			:data-stoprefresh="stoprefresh"
			:data-enddisabled="endDisabled"
			@touchstart="menutouch.touchstart"
			@touchmove="menutouch.touchmove"
			@touchend="menutouch.touchend"
			:style="{ left: menuPosition.left + 'px', top: menuPosition.top + 'px', width: menuSize + 'px', height: menuSize + 'px' }"
		>
			<image :src="icon" :style="{ width: menuSize + 'px', height: menuSize + 'px' }" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script module="menutouch" lang="wxs" src="./move.wxs"></script>
<script>
export default {
	props: {
		customNavBar: {
			type: Boolean,
			default: false
		},
		icon: {
			//图标路径
			type: String,
			default: require('./img/next.png')
		},
		wmenuSize: {
			//按钮大小
			type: Number,
			default: 100
		},
		mode: {
			//初始位置
			type: String,
			default: 'rm'
		},
		xOffset: {
			type: Number,
			default: 0
		},
		yOffset: {
			type: Number,
			default: 0
		},
		disabled: {
			//禁止拖拽
			type: Boolean,
			default: false
		},
		endDisabled: {
			//禁止松开按钮后贴边
			type: Boolean,
			default: false
		},
		wtop: {
			type: Number,
			default: 0
		},
		wright: {
			type: Number,
			default: 0
		},
		stoprefresh:{
			//是否开启 在移动按钮时禁止下拉刷新
			type: Boolean,
			default: false
		},
		wbottom: {
			type: Number,
			default: 0
		},
		wleft: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			type: 1, //平台
			propValue: '',
			windowWidth: 0,
			windowHeight: 0,
			top: 0,
			right: 0,
			bottom: 0,
			left: 0,
			menuSize: 0,
			menuPosition: {
				left: 0,
				top: 0
			}
		};
	},
	mounted() {
		this.getSize();
		//#ifdef H5
		this.type = 1;
		//#endif
		//#ifndef H5
		this.type = 2;
		//#endif
		this.position()
	},
	methods: {
		position() {
			
			switch (this.mode) {
				case 'lt':
					//左上角
					this.$set(this.menuPosition, 'left', this.left + uni.upx2px(this.xOffset));
					this.$set(this.menuPosition, 'top', this.top + uni.upx2px(this.yOffset));
					break;
				case 'rt':
					//右上角
					this.$set(this.menuPosition, 'left', this.windowWidth - this.menuSize - this.right - uni.upx2px(this.xOffset));
					this.$set(this.menuPosition, 'top', this.top + uni.upx2px(this.yOffset));
					break;
				case 'rm':
					//右中
					this.$set(this.menuPosition, 'left', this.windowWidth - this.menuSize - this.right - uni.upx2px(this.xOffset));
					this.$set(this.menuPosition, 'top', (this.windowHeight - this.menuSize) / 2);
					break;
				case 'lm':
					//左中
					this.$set(this.menuPosition, 'left', left + uni.upx2px(this.xOffset));
					this.$set(this.menuPosition, 'top', (this.windowHeight - this.menuSize) / 2);
					break;
				case 'lb':
					//左下角
					this.$set(this.menuPosition, 'left', left + uni.upx2px(this.xOffset));
					this.$set(this.menuPosition, 'top', this.windowHeight - this.menuSize - this.bottom - uni.upx2px(this.yOffset));
					break;
				case 'rb':
					//右下角
					this.$set(this.menuPosition, 'left', this.windowWidth - this.menuSize - this.right - uni.upx2px(this.xOffset));
					this.$set(this.menuPosition, 'top', this.windowHeight - this.menuSize - this.bottom - uni.upx2px(this.yOffset));
					break;
			}
		},
		stopRefesh() {
			//取消下拉刷新
			//#ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.setStyle({
				pullToRefresh: {
					support: false,
					style: plus.os.name === 'Android' ? 'circle' : 'default'
				}
			});
			//#endif
		},
		startRefesh() {
			//开启下拉刷新
			//#ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.setStyle({
				pullToRefresh: {
					support: true,
					style: plus.os.name === 'Android' ? 'circle' : 'default'
				}
			});
			//#endif
		},
		getSize(type) {
			this.top = uni.upx2px(this.wtop);
			this.right = uni.upx2px(this.wright);
			this.bottom = uni.upx2px(this.wbottom);
			this.left = uni.upx2px(this.wleft);
			this.menuSize = uni.upx2px(this.wmenuSize);

			//#ifndef H5
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			//#endif
			//#ifdef H5
			this.windowWidth = uni.getSystemInfoSync().screenWidth;
			//#endif
			//#ifndef H5
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			//#endif
			//#ifdef H5
			this.windowHeight = uni.getSystemInfoSync().screenHeight;
			//#endif
		}
	}
};
</script>

<style scoped lang="scss">
.menuFixed { 
	position: fixed;
	z-index: 1000;
	// border-radius: 50%;
	// background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: none;
	// box-shadow: 0px 2px 4px #c0c0c0 !important;
	// box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14) !important;
}
.transition {
	transition: 0.1s all linear;
}
</style>
